<template>
    <div class="login">
        <van-button type="primary" size="mini" @click="toLogin"> <van-icon name="arrow-left" /></van-button>
        <div class="box">
            <van-field v-model="name" label="名称" placeholder="输入名称" />
            <van-field v-model="username" label="用户名" placeholder="输入账号" />
            <van-field v-model="password" label="密码" placeholder="输入密码" />
            <van-button @click="register" class="button">确认</van-button>
        </div>
    </div>
</template>
 
 
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router'
import { register as registera } from "../api/user"
import { Toast } from 'vant'
const router = useRouter()
let username = ref("");
let password = ref("");
let name = ref("");
let token = ref("")
async function register() {
    let res = await registera(name.value, username.value, password.value)
    if (res.data.code === 200) {
        token.value = res.data.data
        Toast.success(res.data.msg);
        sessionStorage.setItem("token", token.value)
        router.push("/home")
    } else {
        Toast.fail(res.data.msg);
    }
}
function toLogin() {
    router.back();
}
</script>
 
 
<style lang='less' scoped>
.login {
    width: 100vw;
    height: 100vh;
    background-image: url("../static/background/1.jpg");
    background-size: cover;
    position: relative;

    .box {
        position: absolute;
        //right: 30px;
        top: 3.20rem;
        color: #fff;
        font-weight: 700;
        width: 3.85rem;
        font-size: 0.3rem;

        .button {
            position: absolute;
            margin-top: 0.1rem;
            border-radius: 15%;
            width: 0.8rem;
            height: 0.4rem;
            left: 1.40rem;
            background-color: rgba(141, 157, 124, 0.716);
        }
    }

}
</style>